<template>
	<view>
		<view class="form-container" v-if="isUsePwd">
			<view class="logo">
				<image src="https://shoptest1.52kfw.cn/uploads/attach/cw/1.png" mode=""></image>
			</view>
			<view class="logo_text">
				LOGO
			</view>

			<view class="title">
				登录解锁完整功能
			</view>

			<view class="item_input">
				<!-- <uni-data-select v-model="telType"
				  :localdata="telTypeList"></uni-data-select> -->
				<u--input :customStyle="{
					'line-height':'80rpx',
					'background-color':'#fff',
					'height':'80rpx',
					'padding-left':'20rpx',
					'width':'100rpx',
				}" shape="circle" placeholder="请输入手机号" type="number" border="none" v-model="account"></u--input>
			</view>
			<view class="item_input">
				<u--input :customStyle="{
					'line-height':'80rpx',
					'background-color':'#fff',
					'height':'80rpx',
					'padding-left':'20rpx'
				}" shape="circle" password placeholder="请输入密码" type="password" border="none" v-model="password"></u--input>
			</view>
			<view class="item_submit">
				<u-button :customStyle="{
					'background-color':'#4e47a4',
				}" shape="circle" type="primary" text="登录" @click="loginHandler"></u-button>
			</view>

			<view class="userRule">

				<view class="isAggree" @click="isAggree=!isAggree" :class="isAggree ? 'active' :''">
					<u-icon size="20rpx" color="#fff" name="checkbox-mark" v-if="isAggree"></u-icon>
				</view>

				登录即代表同意
				<view class="rule">
					《用户协议》《隐私规则》
				</view>
			</view>

			<view class="changeWay" @click="isUsePwd=!isUsePwd">
				验证码登录
			</view>
		</view>
		<view class="form-container" v-else>
			<view class="logo">
				<image src="https://shoptest1.52kfw.cn/uploads/attach/cw/1.png" mode=""></image>
			</view>
			<view class="logo_text">
				LOGO
			</view>

			<view class="title">
				登录解锁完整功能
			</view>

			<view class="item_input">
				<u--input :customStyle="{
					'line-height':'80rpx',
					'background-color':'#fff',
					'height':'80rpx',
					'padding-left':'20rpx'
				}" shape="circle" placeholder="请输入手机号" type="number" border="none" v-model="account"></u--input>
			</view>
			<view class="item_input">
				<u--input :customStyle="{
					'line-height':'80rpx',
					'background-color':'#fff',
					'height':'80rpx',
					'padding-left':'20rpx'
				}" shape="circle" password placeholder="请输入密码" type="password" border="none" v-model="password"></u--input>
			</view>
			<view class="item_submit">
				<u-button :customStyle="{
					'background-color':'#4e47a4',
				}" shape="circle" type="primary" text="登录" @click="loginHandler"></u-button>
			</view>

			<view class="userRule">

				<view class="isAggree" @click="isAggree=!isAggree" :class="isAggree ? 'active' :''">
					<u-icon size="20rpx" color="#fff" name="checkbox-mark" v-if="isAggree"></u-icon>
				</view>

				登录即代表同意
				<view class="rule">
					《用户协议》《隐私规则》
				</view>
			</view>

			<view class="changeWay" @click="isUsePwd=!isUsePwd">
				密码登录
			</view>
		</view>

		<!-- #ifdef H5 -->
		<view class="bg">
			<view class="list" :class="list%2==0 ? 'rs':''" v-for="list in 10" :key="list">
				<view class="img_item" v-for="img_item in 12" :key="img_item">
					<image :src="`https://shoptest1.52kfw.cn/uploads/attach/cw/${list*img_item}.png`" mode="">
					</image>
				</view>
				<view class="img_item" v-for="img_item in 12" :key="img_item+'_clone'">
					<image :src="`https://shoptest1.52kfw.cn/uploads/attach/cw/${list*img_item}.png`" mode="">
					</image>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="bg">
			<view class="list" :class="list%2==0 ? 'rs':''" v-for="list in 10" :key="list">
				<view class="img_item" v-for="img_item in 12" :key="img_item">
					<image :src="`https://shoptest1.52kfw.cn/uploads/attach/cw/${(list+1)*(img_item+1)}.png`" mode="">
					</image>
				</view>
				<view class="img_item" v-for="img_item in 12" :key="index">
					<image :src="`https://shoptest1.52kfw.cn/uploads/attach/cw/${(list+1)*(img_item+1)}.png`" mode="">
					</image>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<u-overlay :show="true" z-index="-1"></u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				password: 'admin88',
				isAggree: false,
				isUsePwd: true,
				telTypeList: [{
						value: 0,
						text: '86'
					},
					{
						value: 1,
						text: '852'
					},
				],
				telType: 0
			}
		},
		methods: {

			resetLocation(ele) {
				console.log('触发了');
			},
			loginHandler() {
				if (!this.isAggree) {
					uni.showToast({
						title: '请先同意用户协议',
						icon: 'none'
					})
					return
				}
				uni.request({
					url: 'http://106.52.75.114/api/login',
					method: 'POST',
					data: {
						account: this.account,
						password: this.password,
					},
					success: (res) => {
						console.log('res', res.data);
						if (res.data.status == 200) {
							// 登录成功  1. 存储token 2. 跳转（用户中心，首页）
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
							})
							uni.setStorageSync('token', res.data.data.token);

							// 注意, 由于 pages/mine/mine 这个页面是 tabar 页面，不能使用 uni.navigateTo
							// 必须使用 
							// uni.switchTab({
							// 	url: '/pages/mine/mine'
							// });

							// navigateTo:fail can not navigateTo a tabbar page
							// uni.navigateTo({
							// 	url: '/pages/mine/mine'
							// })

							getApp().globalData.isLogin = true
							uni.navigateBack()
						} else {
							// 未登录成功
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
							})
						}
					}
				})
			}

		}
	}
</script>

<style lang="less" scoped>
	page {
		position: relative;
	}

	/* #ifdef H5 */
	page {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.form-container {
		position: relative;
	}

	/* #endif */
	/* #ifdef MP-WEIXIN */



	.form-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* #endif */

	.form-container {
		padding-top: 80rpx;
		opacity: 0.9;
		width: 600rpx;
		height: 600rpx;
		border-radius: 40rpx;
		background-color: #e0e0e0;

		.item_input {
			width: 80%;
			height: 80rpx;
			background-color: #fff;
			margin: 30rpx auto;
			border-radius: 40rpx;
			display: flex;

			.uni-stat__select {
				padding-left: 10rpx;
				border-radius: 40rpx;
				height: 80rpx;
			

				::v-deep .uni-stat-box {
					border-radius: 40rpx;
				
					height: 80rpx;

					.uni-select {

						height: 80rpx;
						border: none;
					}
				}
			}

		}

		.item_submit {
			width: 80%;
			height: 80rpx;
			background-color: #4e47a4;
			margin: 20rpx auto;
			border-radius: 40rpx;
		}

		.logo {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);


			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}
		}

		.logo_text {
			font-size: 32rpx;
			font-weight: bold;
			color: #4e47a4;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.title {
			font-size: 28rpx;
			color: #4e47a4;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.userRule {
			display: flex;
			width: 80%;
			margin: 0 auto;
			font-size: 24rpx;
			align-items: center;
			justify-content: space-between;

			.isAggree {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: #e0e0e0;
				border: 1rpx solid #000;

				&.active {
					background-color: #4e47a4;
				}
			}

			.rule {
				color: #4e47a4;
			}
		}

		.changeWay {
			font-size: 24rpx;
			color: #4e47a4;
			width: 80%;
			margin: 20rpx auto;
		}
	}

	.bg {
		position: fixed;
		z-index: -10;
		top: 0;
		left: 0;
		width: 100vw;
		/* 明确宽高 */
		height: 100vh;
		overflow: visible;
		/* 防止裁剪 */
		transform-origin: 75% 100%;
		transform: rotate(-45deg);
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.list {
			display: flex;
			gap: 20rpx;
			animation: scroll 10s linear infinite;
			will-change: transform;

			&.rs {
				animation: scroll_rs 10s linear infinite;
			}

			.img_item {
				width: 150rpx;
				height: 150rpx;
				padding: 10rpx;
				box-sizing: border-box;
			}

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
			}
		}
	}


	@keyframes scroll {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-2040rpx);
		}
	}

	@keyframes scroll_rs {
		0% {
			transform: translateX(-2040rpx);
		}

		100% {
			transform: translateX(0);
		}
	}
</style>